<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生成绩管理系统</title>
  <link rel="stylesheet" href="/public/lib/element-ui/index.css">
  <script src="/public/lib/vue.js"></script>
  <script src="/public/lib/element-ui/index.js"></script>
  <script src="/public/lib/axios.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    }
    .app-container {
      display: flex;
      height: 100vh;
    }
    .sidebar {
      width: 200px;
      background-color: #304156;
      color: white;
      height: 100%;
      overflow-y: auto;
    }
    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .header {
      background-color: #409EFF;
      color: white;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .content {
      flex: 1;
      padding: 20px;
      background-color: #f0f2f5;
      overflow-y: auto;
    }
    .welcome-message {
      background-color: white;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .menu-item {
      padding: 12px 20px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .menu-item:hover {
      background-color: #263445;
    }
    .menu-item.active {
      background-color: #409EFF;
    }
    .user-info {
      display: flex;
      align-items: center;
    }
    .logout-btn {
      margin-left: 15px;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="app-container">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div style="padding: 20px; text-align: center; border-bottom: 1px solid #434a50;">
        <h3>成绩管理系统</h3>
      </div>
      <!-- 管理员菜单 -->
      <div v-if="user.role_id === 3">
        <div class="menu-item" :class="{active: activeMenu === 'home'}" @click="loadContent('home')">
          首页
        </div>
        <div class="menu-item" :class="{active: activeMenu === 'score_management'}" @click="loadContent('score_management')">
          成绩管理
        </div>
        <div class="menu-item" :class="{active: activeMenu === 'settings'}" @click="loadContent('settings')">
          查询设置
        </div>
        <div class="menu-item" :class="{active: activeMenu === 'student_management'}" @click="loadContent('student_management')">
          学生信息管理
        </div>
      </div>
      <!-- 教师菜单 -->
      <div v-else-if="user.role_id === 1">
        <div class="menu-item" :class="{active: activeMenu === 'home'}" @click="loadContent('home')">
          首页
        </div>
        <div class="menu-item" :class="{active: activeMenu === 'score_management'}" @click="loadContent('score_management')">
          成绩管理
        </div>
        <div class="menu-item" :class="{active: activeMenu === 'settings'}" @click="loadContent('settings')">
          查询设置
        </div>
      </div>
      <!-- 学生菜单 -->
      <div v-else-if="user.role_id === 2">
        <div class="menu-item" :class="{active: activeMenu === 'home'}" @click="loadContent('home')">
          首页
        </div>
        <div class="menu-item" :class="{active: activeMenu === 'score_query'}" @click="loadContent('score_query')">
          成绩查询
        </div>
        <div class="menu-item" :class="{active: activeMenu === 'profile'}" @click="loadContent('profile')">
          个人信息
        </div>
      </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="main-content">
      <!-- 顶部导航栏 -->
      <div class="header">
        <h2>{{ getWelcomeMessage() }}</h2>
        <div class="user-info">
          <span>欢迎，{{ user.name }} ({{ getRoleName() }})</span>
          <el-button class="logout-btn" type="text" @click="handleLogout" style="color: white;">退出登录</el-button>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <!-- 首页内容 -->
        <div v-if="activeMenu === 'home'" class="welcome-message">
          <h3>系统首页</h3>
          <p>欢迎使用学生成绩管理系统！</p>
          <p>您可以通过左侧菜单访问系统功能。</p>

          <div v-if="user.role_id === 3">
            <h4>管理员功能：</h4>
            <ul>
              <li>成绩管理 - 录入和管理学生成绩</li>
              <li>查询设置 - 设置成绩查询条件</li>
              <li>学生信息管理 - 管理学生基本信息</li>
            </ul>
          </div>

          <div v-else-if="user.role_id === 1">
            <h4>教师功能：</h4>
            <ul>
              <li>成绩管理 - 录入和管理学生成绩</li>
              <li>查询设置 - 设置成绩查询条件</li>
            </ul>
          </div>

          <div v-else-if="user.role_id === 2">
            <h4>学生功能：</h4>
            <ul>
              <li>成绩查询 - 查看个人成绩</li>
              <li>个人信息 - 查看和修改个人信息</li>
            </ul>
          </div>
        </div>

        <!-- 成绩管理内容 -->
        <div v-if="activeMenu === 'score_management'">
          <iframe src="/score_management.html" width="100%" height="100%" frameborder="0" style="min-height: 600px;"></iframe>
        </div>

        <!-- 成绩查询内容 -->
        <div v-if="activeMenu === 'score_query'">
          <iframe src="/score_query.html" width="100%" height="100%" frameborder="0" style="min-height: 600px;"></iframe>
        </div>

        <!-- 个人信息内容 -->
        <div v-if="activeMenu === 'profile'">
          <iframe src="/profile.html" width="100%" height="100%" frameborder="0" style="min-height: 600px;"></iframe>
        </div>

        <!-- 学生信息管理内容 -->
        <div v-if="activeMenu === 'student_management'">
          <iframe src="/student_management.html" width="100%" height="100%" frameborder="0" style="min-height: 600px;"></iframe>
        </div>

        <!-- 查询设置内容 -->
        <div v-if="activeMenu === 'settings'">
          <iframe src="/settings.html" width="100%" height="100%" frameborder="0" style="min-height: 600px;"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        user: {
          id: '',
          username: '',
          name: '',
          role_id: 0
        },
        activeMenu: 'home'
      };
    },
    mounted() {
      this.getUserInfo();
    },
    methods: {
      getUserInfo() {
        axios.get('/api/user')
                .then(response => {
                  if (response.data.success) {
                    this.user = response.data.user;
                  } else {
                    this.$message.error('获取用户信息失败');
                    window.location.href = '/';
                  }
                })
                .catch(error => {
                  console.error('获取用户信息错误:', error);
                  window.location.href = '/';
                });
      },
      getWelcomeMessage() {
        if (this.user.role_id === 3) {
          return '系统管理员你好，欢迎登录学生成绩管理系统';
        } else if (this.user.role_id === 1) {
          return '教师你好，欢迎登录学生成绩管理系统';
        } else {
          return '同学你好，欢迎登录学生成绩管理系统';
        }
      },
      getRoleName() {
        if (this.user.role_id === 3) {
          return '管理员';
        } else if (this.user.role_id === 1) {
          return '教师';
        } else {
          return '学生';
        }
      },
      loadContent(menu) {
        this.activeMenu = menu;
      },
      handleLogout() {
        axios.get('/api/logout')
                .then(response => {
                  if (response.data.success) {
                    this.$message.success('退出登录成功');
                    window.location.href = '/';
                  } else {
                    this.$message.error('退出登录失败');
                  }
                })
                .catch(error => {
                  console.error('退出登录错误:', error);
                  this.$message.error('退出登录失败');
                });
      }
    }
  });
</script>
</body>
</html>